<template>
  <div class="indexpage">
    <div class="header">
    </div>
    <section class="actions">
      <div class="ConnectStatus" v-if="ConnectStatus==false"> 正在连接中 </div>
      <div class="coverIndex">
        <div class="circleBgIndex">
          <div class="bg-img">
            <div class="imgBg" @click="goIndex('/ctrlmain')">
              <dl>
                <dt><img src="../img/function/norm/unselected/zhiNengKongZhi.png" alt=""></dt>
                <dt>智能控制</dt>
              </dl>
            </div>
          </div>
        </div>
        <div style="position:absolute;right: 16px;bottom: 38%"><img src="../img/pooai.png"></div>
      </div>
      <div class="list-menu">
        <div class="aui-grid textColor">
          <div class="aui-row">
            <div @click="goPath('/xindian')" class="listBorder" style="border-left:none">
              <div class="list-table weui-grid">
                <img id="keShiXinLvImg" src="../img/function/norm/checked/keShiXinLv.png" alt="">
                <div id="keShiXinLvDiv">可视心率</div>
              </div>
            </div>
            <div @click="goPath('/pailuan')" class="listBorder"  style="border-right:none">
              <div class="list-table weui-grid vux-grid-item-no-border">
                <img id="paiLuanImg" src="../img/function/norm/unselected/paiLuan.png" alt="">
                <div id="paiLuanDiv">排卵</div>
              </div>
            </div>
            <div @click="goPath('/niaojian')" class="listBorder" style="border-left:none">
              <div class="list-table weui-grid">
                <img id="nianJianImg" src="../img/function/norm/unselected/niaoJian.png" alt="">
                <div id="nianJianDiv">尿检</div>
              </div>
            </div>
            <div @click="goPath('/yunqi')" class="listBorder " style="border-right:none" >
              <div class="list-table weui-grid vux-grid-item-no-border">
                <img id="yunQiImg" src="../img/function/norm/unselected/yunQi.png" alt="">
                <div id="yunQiDiv">孕检</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--<div id="layerBg">-->
      <!--<div class=" dialog">-->
      <!--<div>小普发现您已长时间未体检了，关爱自己，是否现在开始体检？</div>-->
      <!--<div class="aui-content">-->
      <!--<div id="closeDialog" class="aui-pull-left dialogBtn">不了,谢谢</div>-->
      <!--<div class="aui-pull-right dialogBtn">马上检测</div>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
    </section>
    <addtoAlert v-if="showAddtoAlert"></addtoAlert>
    <isOnlineAlert v-if="isOnline==false" @closeTipOnline="closeTipOnline" ></isOnlineAlert>
    <LoadingInit v-if="showAlertState"></LoadingInit>
    <connectinit v-if="ConnectStatus==false"></connectinit>
    <isSaveToCloud :alertText="alertText" v-if="isSave" @closeTipIssave="closeTipIssave" @closeTipOnPage="closeTipOnPage"></isSaveToCloud>
  </div>
</template>

<script>
import {mapMutations, mapState} from 'vuex'
import LoadingInit from '../../common/LoadingInit'
import connectinit from '../../common/connectinit'
import addtoAlert from '../../common/addtoAlert'
import isSaveToCloud from '../../common/isSaveToCloud'
import isOnlineAlert from '../../common/isOnlineAlert'
import '../css/aui.css'
import '../css/aui-flex.css'

export default {
  name: 'Index',
  data () {
    return {
      isOnline:true,
      isIOSdev:false,
      isshow:false,
      alertText: '当前用户未授权登陆，检测结果将无法保存至云端！',
      showAddtoAlert:false,
      pa:'',
      isSave: false,
      exitTime: 0
    }
  },
  computed: {
    ...mapState([
      'UserID',
      'ConnectStatus',
      'showAlertState',
      'stateEnd',
      'connectEnd',
      'IsYunjDone',
      'IsConnect',
      'Duuid'
    ])
  },
  components: {
    isOnlineAlert,
    isSaveToCloud,
    LoadingInit,
    connectinit,
    addtoAlert
  },
  watch: {
    connectEnd (val) {
      this.stateEnd = val
    },
    stateEnd (val) {
      this.stateEnd = val
    },
    ConnectStatus(val){
      if(this.ConnectStatus==true) {
        this.showAddtoAlert = false
      }
      clearTimeout(window.SetTimeOUTc)
      var self = this
      if (this.ConnectStatus==false) {
        window.eqTime = function(){
          var now = new Date()
          if (now.getTime() > self.exitTime){
            if(self.ConnectStatus==false) {
              self.showAddtoAlert = true
            }
            clearInterval(window.ADDTOOut)
          }
        }

        var numberMillis = 30000
        var now = new Date()
        this.exitTime = now.getTime() + numberMillis
        clearInterval(window.ADDTOOut)
        window.ADDTOOut = setInterval("window.eqTime()",500)
      }
    },
  },
  mounted () {
    window.hilink.setTitleVisible(true)
    window.byteToString = function (arr) {
      if(typeof arr === 'string') {
        return arr;
      }
      var str = '',
        _arr = arr;
      for(var i = 0; i < _arr.length; i++) {
        var one = _arr[i].toString(2),
          v = one.match(/^1+?(?=0)/);
        if(v && one.length == 8) {
          var bytesLength = v[0].length;
          var store = _arr[i].toString(2).slice(7 - bytesLength);
          for(var st = 1; st < bytesLength; st++) {
            store += _arr[st + i].toString(2).slice(2);
          }
          str += String.fromCharCode(parseInt(store, 2));
          i += bytesLength - 1;
        } else {
          str += String.fromCharCode(_arr[i]);
        }
      }
      return str;
    }
    window.stringToBytes = function ( str ) {
      var ch, st, re = [];
      for (var i = 0; i < str.length; i++ ) {
        ch = str.charCodeAt(i);  // get char
        st = [];                 // set up "stack"
        do {
          st.push( ch & 0xFF );  // push byte to stack
          ch = ch >> 8;          // shift value down by 1 byte
        }
        while ( ch )
        re = re.concat( st.reverse() );
      }
      return re
    }
    window.writeTo16Index = function (dataArr) {
      var newstr = '';
      for(var i = 0;i< dataArr.length;i++) {
        var str16 = (Array(2).join(0) + dataArr[i].toString(16)).slice(-2);
        newstr += str16
      }
      return newstr
    }
    window.readTo10Index = function (dataStr) {
      var newArr = new Array
      for(var i = 0; i<dataStr.length;i=i+2) {
        newArr.push(parseInt(dataStr.substring(i,i+2),16))
      }
      return newArr
    }

    var u = navigator.userAgent
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
    this.isIOSdev = isiOS
    //隐私声明显示判断
    if (isiOS === true) {

    } else {
      var ISRecieverByUser = window.hilink.getStorageSync('ISRecieverByUser')
      console.log(ISRecieverByUser)
      if (typeof ISRecieverByUser !== "undefined") {
        var reciverB = window.readTo10Index(ISRecieverByUser)
        console.log(reciverB)
        console.log(window.byteToString(reciverB))
        if(window.byteToString(reciverB) === 'reciverB') {
          this.isshow = false
        } else {
          this.$router.push('/yinsism')
        }
      } else {
        this.$router.push('/yinsism')
      }

    }

    if (isiOS === true) {
      this.alertText = "苹果手机不支持授权登录，当次检测结果将无法保存至云端！"
    }
    var self = this
    window.checkConnect = function(){
      if(self.ConnectStatus==false) {
        self.showAddtoAlert = true
      }
    }
    window.initDataWindows = function(){
      self.initData()
    }
    clearTimeout(window.SetTimeOUTc)
    window.SetTimeOUTc = setTimeout("checkConnect()",30000)
  },
  methods: {
    ...mapMutations([ 'WTGYJ', 'SETValueChangeType', 'TOTLECALLBACK','SETUSERID','AxiosSetuser',
    ]),
    goToDo () {
    },
    goIndex (pa) {
      // if (window.navigator.onLine === true) {
      //   this.isOnline = true
      // } else {
      //   this.isOnline = false
      //   return
      // }

      this.$router.push({path: pa})
    },
    goPath (pa) {
      if (window.navigator.onLine === true) {
        this.isOnline = true
      } else {
        this.isOnline = false
        return
      }

      var u = navigator.userAgent
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

      if(this.UserID === ""){
        this.isSave = true
        this.pa = pa
      } else {
        if (isiOS==true) {
          this.$router.push({path: pa+'first'})
        } else {
          this.$router.push({path: pa})
        }
      }
    },
    closeTipOnPage(){
      this.isSave = false
    },
    closeTip () {
      this.showAlert = false
    },
    closeTipOnline () {
      this.isOnline = true
    },
    closeTipIssave(){
      var u = navigator.userAgent
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

      this.isSave = false
      if (isiOS==true) {
        this.$router.push({path: this.pa+'first'})
      } else {
        this.$router.push({path: this.pa})
      }
    },
    startToCheck () {
      this.WTGYJ({num: 2})
    },
    alertGn () {
      alert('可视心率功能暂未开发')
    },
    initData () {
      // this.TOTLECALLBACK()
      // window.hilink.openBluetoothAdapter()
      // // window.hilink.getConnectedBluetoothDevices('0000ffe0-0000-1000-8000-00805f9b34fb','getConnectedBluetoothDevicesCallback')
      // // window.hilink.onBLECharacteristicValueChange ("ValueChange")
      // window.hilink.onBLEConnectionStateChange ("connetState")
      // var deviceId = window.getStorageSync('deviceId')
      // window.hilink.createBLEConnection(deviceId)
    }
  },
  // destroyed () {
  //   console.log('destroyed')
  //   clearInterval(window.setIntervalId)
  // }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .indexpage{
    height: 100%;
    overflow: hidden;
    background: #288af0;
  }
  .header{
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .actions{
    height: 90%;
  }
  .coverIndex{
    height: 60%;
  }
  .circleBgIndex{
    position: absolute;
    left:0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    height: 60%;
    width: 60%;

  }
  .bg-img{
    width: 100%;
    height: 53%;
    border-radius: 3rem;
    border: 1px solid rgba(255,255,255,0.3);
  }
  .imgBg{
    padding: 1rem;
    border-radius: 3rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.3);
    text-align: center;
    margin:0 auto;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transform: scale(0.95,0.95);
    transform: scale(0.95,0.95);
  }
  .imgBg dl dt{
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 14px;
  }
  .imgBg dl dt:last-child{
    margin-top: 1rem;
  }
  .imgBg img{
    width: 50%;
    height: 60%;
  }
  .zhiNeng{
    margin-top: 2rem;
    color: #fff;
    font-size: 16px;
  }
  .list-menu{
    height: 40%;
  }
  .aui-row{
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    height: 100%;
  }
  .textColor{
    height: 100%;
  }
  .listBorder{
    width:50%;
    height: 50%;
    text-align: center;
    display: table;
    z-index: 10;
    font-size: 13px;
    color: rgba(0,0,0,0.5);
    position: relative;
  }
  .weui-grid:before {
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-right: 1px solid #c9caca;
    color: #c9caca;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
  }
  .weui-grid:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #c9caca;
    color: #c9caca;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
  .weui-grid.vux-grid-item-no-border:before {
    display: none;
  }
  .list-table{
    display: table-cell;
    vertical-align: middle;
  }
  .list-table div{
    margin-top: 10px;
  }
  .listBorder img{
    margin: 0 auto;
    width: 20%;
  }
  .ConnectStatus{
    text-align: center;
    color: red;
    margin: auto;
    position: absolute;
    left: 50%;
    margin-left: -30px;
  }
</style>
